<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.circle, .circle::before, .circle::after{
				width: 20em;
				height: 20em;
				box-sizing: border-box;
				border-top: 0.3em solid currentcolor;
				border-radius: 50%;
				position: relative;
			}
			.circle::before, .circle::after{
				content: '';
				position: absolute;
				top: -0.2em;
			}
			.circle{
				color: hotping;
			}
			.circle::before{
				color: dodgerblue;
			}
			.circle::after{
				color: gold;
			}
			.circle::before{
				transform: rotate(120deg);
			}
			.circle::after{
				transform: rotate(240deg);
			}
		</style>
	</head>
	<body>
		<figure class="circle"></figure>
	</body>
</html>
